<template>
    <div class="content-box">
        <page-view>
            <page-header title="新增地址" :showBack="true"></page-header>

            <div >
                <address-edit
                    :area-list="areaList"
                    :area-columns-placeholder="['请选择', '请选择', '请选择']"
                    @save="onSave"
                    :is-saving="isloading"
                    >
                    <field v-model="tag" label="标签" placeholder="设定标签" > </field>
                   <tag color="#ffe1e1" text-color="#ad0000">标签</tag>
                    </address-edit>
            </div>
        </page-view>

    </div>
</template>

<script>
import { AddressEdit,Field,Tag } from 'vant';
import { reactive,toRefs,} from 'vue';
import api from '../utils/api';
export default {
    components:{AddressEdit,Field,Tag},
    setup () {
   
   let info=reactive({
       areaList:{},
       isloading:false,
       tag:''
   })

const getAreaList=async()=>{
let result=await api.area.getAreaList()
info.areaList=result
console.log(info.areaList)
} 

getAreaList()

 const onSave = async(content) => {
     console.log(content)
     Toast('save')
    };

        return {
        onSave,
       ...toRefs(info)
        };
    }
}
</script>

<style lang="scss" scoped>
.content-box{
    height: 100%;
}
</style>